<template>
    <div class="login-box">
        <div class="login-form">
            <h1>企业中后台管理系统</h1>
            <el-form show-message :model="userInfo" :rules="rules" center class="login-info">
                <el-form-item prop="username">
                    <el-input v-model="userInfo.username" type="text" :prefix-icon="User" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="userInfo.password" type="password" :prefix-icon="Lock"
                        placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="userInfo.captcha" type="text" :prefix-icon="Lock" placeholder="验证码">
                        <template #append>
                            <div class="captcha-img" v-html="captcha" @click="changeCaptcha"></div>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" style="width: 100%" @click="userLogin">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { User, Lock } from '@element-plus/icons-vue';
import { useUserStore } from "@/store/user"
import { getCaptcha } from '@/api/user'
const userStore = useUserStore();
const router = useRouter();
const userInfo = reactive({
    username: 'xiajq',
    password: 'xxjjqq',
    captcha: ''
});
const rules = reactive({
    username: [
        {
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
        }
    ],
    password: [
        {
            required: true,
            message: '请输入密码',
            trigger: 'blur'
        }
    ],
    captcha: [
        {
            required: true,
            message: '请输入验证码',
            trigger: 'blur'
        }
    ]
});
const captcha = ref('');
onMounted(() => {
    fetchCaptcha()

});
function changeCaptcha() {
    fetchCaptcha();
}
async function fetchCaptcha() {
    try {
        const res: any = await getCaptcha();
        captcha.value = res;
    } catch (error) {
        console.error("获取验证码失败:", error);
    }
}
function userLogin() {
    userStore.loginUp(userInfo).then(() => {
        router.push('/');
    });
}
</script>
<style lang="less" scoped>
.login-box {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    height: 100vh;
    background: var(--gn-backgroud-color);

    .login-form {
        display: flex;
        width: 300px;
        text-align: center;
        flex-direction: column;

        .login-info {
            height: max-content;
        }
    }
}
</style>
